<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <form id="examineTargetForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
          <input type="hidden" name="id" v-model="item.id"/>
          <input type="hidden" name="token" v-model="item.token"/>
          <input type="hidden" name="newFlag" v-model="newFlag"/>
          <div class="clearfix "></div>
          <div class="col-md-6">

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核方案名称：</label>
              <div class="col-md-12">
                <input id="bean-name" name="name" v-model="item.name" class="form-control" type="text"
                    placeholder="请输入考核方案名称" required="" aria-required="true" aria-describedby="bean-name-error"
                    maxlength="55" aria-invalid="true">
                <span id="bean-name-error" class="help-block m-b-none" for="bean-name"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核范围：</label>
              <div class="col-md-12">
                <select data-placeholder="选择考核范围" id="bean-scope" name="scope" class="form-control"
                    required="" aria-required="true" aria-describedby="bean-scope-error" aria-invalid="true">
                  <option value="">--请选择考核范围--</option>
                  <option value="1" :selected="item.scope == 1">当前行政区划</option>
                  <option value="2" :selected="item.scope == 2">指定河道</option>
                </select>
                <span id="bean-scope-error" class="help-block m-b-none" for="bean-scope"></span>
              </div>
            </div>

            <div class="form-group clearfix hide" id="riverDiv">
              <label class="col-md-8 control-label">考核河道名称：</label>
              <div class="col-md-12">
                <select data-placeholder="选择河道名称" id="bean-riverId" name="riverId" class="form-control"
                    aria-required="true" aria-describedby="bean-riverId-error" aria-invalid="true">
                  <option value="">--请选择河道名称--</option>
                  <option v-if="rivers != null && rivers.length > 0"
                      v-for="(river, index) in rivers" :value="river.id"
                      :selected="river.id == item.riverId">{{ river.name }}
                  </option>
                </select>
                <input type="hidden" name="riverName" id="bean-riverName" v-model="item.riverName"/>
                <span id="bean-riverId-error" class="help-block m-b-none" for="bean-riverId"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核周期：</label>
              <div class="col-md-12">
                <select data-placeholder="选择考核周期" id="bean-period" name="period" class="form-control"
                    required="" aria-required="true" aria-describedby="bean-period-error" aria-invalid="true">
                  <option value="">--请选择考核周期--</option>
                  <option value="按年份" :selected="item.period == '按年份'">按年份</option>
                  <option value="按季度" :selected="item.period == '按季度'">按季度</option>
                  <option value="按月份" :selected="item.period == '按月份'">按月份</option>
                </select>
                <span id="bean-period-error" class="help-block m-b-none" for="bean-period"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">指标有效起始时间：</label>
              <div class="col-md-12">
                <input autocomplete="off" id="bean-startDate" name="startDate" v-model="item.startDate"
                    class="laydate-icon form-control layer-date" type="text" placeholder="请输入指标有效起始时间" required=""
                    aria-required="true" aria-describedby="bean-startDate-error" aria-invalid="true">
                <span id="bean-startDate-error" class="help-block m-b-none" for="bean-startDate"></span>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">指标有效结束时间：</label>
              <div class="col-md-12">
                <input autocomplete="off" id="bean-endDate" name="endDate" v-model="item.endDate"
                    class="laydate-icon form-control layer-date" type="text" placeholder="请输入指标有效结束时间" required=""
                    aria-required="true" aria-describedby="bean-endDate-error" aria-invalid="true">
                <span id="bean-endDate-error" class="help-block m-b-none" for="bean-endDate"></span>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="col-md-8 control-label">指标考核类型：</label>
              <div class="col-md-12">
                <select data-placeholder="选择指标考核类型" id="bean-examineType" name="examineType"
                    class="form-control" required="" aria-required="true" aria-describedby="bean-examineType-error"
                    aria-invalid="true">
                  <option value="">--请选择指标考核类型--</option>
                  <option value="河长考核" :selected="item.examineType == '河长考核'">河长考核</option>
                  <option value="政绩考核" :selected="item.examineType == '政绩考核'">政绩考核</option>
                  <option value="巡查考核" :selected="item.examineType == '巡查考核'">巡查考核</option>
                  <option value="履职考核" :selected="item.examineType == '履职考核'">履职考核</option>
                </select>
                <span id="bean-examineType-error" class="help-block m-b-none" for="bean-examineType"></span>
              </div>
            </div>

          </div>
          <div class="col-md-6">

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">指标集类型：</label>
              <div class="col-md-12">
                <select data-placeholder="选择指标集类型" id="bean-collectType" name="collectType"
                    class="form-control" required="" aria-required="true" aria-describedby="bean-collectType-error"
                    aria-invalid="true">
                  <option value="年度考核" :selected="item.collectType == '年度考核'">年度考核</option>
                  <option value="季度考核" :selected="item.collectType == '季度考核'">季度考核</option>
                  <option value="月度考核" :selected="item.collectType == '月度考核'">月度考核</option>
                  <option value="系统自动考核" :selected="item.collectType == '系统自动考核'">系统自动考核</option>
                </select>
                <span id="bean-collectType-error" class="help-block m-b-none" for="bean-collectType"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">系统自动考核占比：</label>
              <div class="col-md-12">
                <input id="bean-autoScale" name="autoScale" v-model="item.autoScale" class="form-control" type="text"
                    placeholder="请输入系统自动考核占比" required="" aria-required="true" range="[0,100]"
                    aria-describedby="bean-autoScale-error" aria-invalid="true">
                <span id="bean-autoScale-error" class="help-block m-b-none" for="bean-autoScale"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">人工考核占比：</label>
              <div class="col-md-12">
                <input id="bean-factitiousScale" name="factitiousScale" v-model="item.factitiousScale"
                    class="form-control" type="text" placeholder="请输入人工考核占比" required="" aria-required="true"
                    aria-describedby="bean-factitiousScale-error" aria-invalid="true" range="[0,100]">
                <span id="bean-factitiousScale-error" class="help-block m-b-none" for="bean-factitiousScale"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">考核总分：</label>
              <div class="col-md-12">
                <input id="bean-totalScore" name="totalScore" v-model="item.totalScore" class="form-control" type="text"
                    placeholder="请输入考核总分" required="" aria-required="true" aria-describedby="bean-totalScore-error"
                    aria-invalid="true" digits="true" min="0">
                <span id="bean-totalScore-error" class="help-block m-b-none" for="bean-totalScore"></span>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="col-md-8 control-label">备注：</label>
              <div class="col-md-12">
                <input id="bean-memo" name="memo" v-model="item.memo" class="form-control" type="text"
                    placeholder="请输入备注" aria-describedby="bean-memo-error" maxlength="255" aria-invalid="true">
                <span id="bean-memo-error" class="help-block m-b-none" for="bean-memo"></span>
              </div>
            </div>

          </div>

          <div class="clearfix "></div>
          <div class="col-12 text-center" style="height: 50px;">
            <div>
              <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import '@/assets/css/style.css'

import $ from '@/assets/js/jquery-vendor.js'
import 'jquery.cookie'
import axios from 'axios'
import '@/assets/js/validate/validation-vendor.js'

import 'layui-laydate/dist/theme/default/laydate.css'
import laydate from 'layui-laydate'
import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

export default {
  data() {
    return {
      item: {},
      rivers: [],
      newFlag: 0,
      uuidToken: ''
    }
  },
  mounted() {
    let that = window.$vueApp = this;
    document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
    $('#examineTargetForm').validate();
    that.staff.init(function () {
      that.newFlag = sessionStorage.getItem(site.examineTarget.info);
      if (that.newFlag) that.uuidToken = apiUtil.guid();
      if (apiUtil.existSessionKey(site.examineTarget.info)) {
        that.info();
      }
    });
    laydate.render({
      elem: '#bean-startDate',
      event: 'click',
      type: 'date',
      format: 'yyyy-MM-dd',
      done: function (val) {
        that.item.startDate = val;
      }
    });
    laydate.render({
      elem: '#bean-endDate',
      event: 'click',
      type: 'date',
      format: 'yyyy-MM-dd',
      done: function (val) {
        that.item.endDate = val;
      }
    });

    $('#bean-scope').change(function () {
      if ($(this).val() === '2') {
        $('#riverDiv').removeClass('hide');
        $('#bean-riverId').prop('required', true);
        that.riverList();
      } else {
        $('#riverDiv').addClass('hide');
        $('#bean-riverId').removeAttr('required');
      }
    });
    $('#bean-riverId').change(function () {
      $('#bean-riverName').val($(this).find('option:selected').text());
    });
  },
  methods: {
    info() {
      let that = this;
      axios.get(site.examineTarget.info + sessionStorage.getItem(site.examineTarget.info), {}).then(function (response) {
        const result = response.data;
        if (result.code === 0) {
          that.item = result.data;
          if (that.item.scope === 2) {
            $('#riverDiv').removeClass('hide');
            that.riverList();
          }
        } else {
          alert(result.message);
        }
      });
    },
    save() {
      let that = this;
      if ($('#examineTargetForm').valid()) {
        axios.post(site.examineTarget.save, $('#examineTargetForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          // console.info("获取数据.." + JSON.stringify(result));
          if (result.code === 0) {
            parent.$vueApp.page();
            alert('保存成功!');
            that.lbox.closeMyBoxLayer()
          } else {
            alert(result.message);
          }
        });
      }
    },
    riverList() {
      let that = this;
      if (that.rivers != null && that.rivers.length > 0) {
        return;
      }
      axios.get(site.riverInfo.list + '?levelFlag=2', {}).then(function (response) {
        var result = response.data;
        if (result.code === 0) {
          that.rivers = result.data;
        } else {
          alert(result.message);
        }
      });
    }
  }
}
</script>

